import React from 'react';
import {connect} from 'dva';
import styles from './IndexPage.less';
import {Input,Select} from 'antd';
const Option = Select.Option;
import {VtxModal,VtxInput,VtxSelect} from 'vtx-ui';
import VtxModalList from '../components/VtxModalList';
console.log(JSON.stringify(styles))
class IndexPage extends React.Component{
    constructor(props){
        super(props);
        this.lis = null;
        this.state= {}
    }
    render(){
        let t = this,_props = t.props;
        let dispatch = _props.dispatch;
        let {
            value1,value2,value3,value4,value5,value7,
            select1
        } = _props.modalList;
        return (
            <VtxModal
                title={'新增'}
                visible={true}
                onOk={
                    ()=>{
                        this.lis.submit().then(data=>{
                            console.log(data);
                        })
                    }
                }
                onCancel={
                    ()=>{
                        this.lis.clear();
                    }
                }
            >
                <VtxModalList 
                    ref={(lis)=>{this.lis = lis}}
                    visible={true}
                    isRequired={true}
                >
                    <div data-modallist={{layout:{type: 'title',require: false,}}}>title</div>
                    <div data-modallist={{layout:{type: 'text',require: true,}}}>dakjhd</div>
                    <div data-modallist={{layout:{type: 'text',name: '测试',require: true,className: 'a',}}}>dakjhd</div>
                    <div data-modallist={{layout:{type: 'title',require: false}}}>title2</div>
                    <div data-modallist={{layout:{type: 'text',name: '测试',require: true}}}>dakjhd</div>
                    <div data-modallist={{layout:{type: 'text',name: '测试'}}}>dakjhd</div>
                    <VtxInput 
                        value={value1}
                        onChange={(e)=>{
                            dispatch({
                                type: 'modalList/updateState',
                                payload:{
                                    value1: e.target.value
                                }
                            })
                        }}
                        data-modallist={{
                            layout:{width: 60,name: '测试1',require: false,comType: 'input'},
                            regexp:{
                                value: value1,
                                exp: /(\d)/,
                                repete: {
                                    url: '/api/repete',
                                    key: JSON.stringify({name: value1})
                                }
                            }
                        }}
                    />
                    <VtxInput 
                        value={value7}
                        onChange={(e)=>{
                            dispatch({
                                type: 'modalList/updateState',
                                payload:{
                                    value7: e.target.value
                                }
                            })
                        }}
                        data-modallist={{
                            layout:{width: 50,name: '测试数字',require: true,maxNum: 50,comType: 'input'},
                            regexp:{
                                value: value7,
                                exp: [function(){return false},/^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/],
                                errorMsg: ['必须是数字','必须是数字1']
                            }
                        }}
                    />
                    <VtxInput 
                        value={value2}
                        onChange={(e)=>{
                            dispatch({
                                type: 'modalList/updateState',
                                payload:{
                                    value2: e.target.value
                                }
                            })
                        }}
                        data-modallist={{
                            layout:{width: 50,name: '测试',require: true},
                            regexp:{
                                value: value2,
                                exp: /\S/
                            }
                        }}
                    />
                    <VtxInput
                        value={value3}
                        onChange={(e)=>{
                            dispatch({
                                type: 'modalList/updateState',
                                payload:{
                                    value3: e.target.value
                                }
                            })
                        }}
                        data-modallist={{
                            layout:{width: 100,name: '测试',require: true},
                            regexp:{
                                value: value3,
                                exp: (val)=>{ if(/\S/.test(val)){return true}else{return false}}
                            }
                        }}
                    />
                    <VtxInput 
                        value={value4}
                        onChange={(e)=>{
                            dispatch({
                                type: 'modalList/updateState',
                                payload:{
                                    value4: e.target.value
                                }
                            })
                        }}
                        data-modallist={{
                            layout:{width: 50,name: '测试',require: true},
                            regexp:{
                                value: value4,
                                exp: (val)=>{ if('123'.indexOf(val) > -1 ){return true}else{return false}}
                            }
                        }}
                    />
                    <VtxInput
                        value={value5}
                        onChange={(e)=>{
                            dispatch({
                                type: 'modalList/updateState',
                                payload:{
                                    value5: e.target.value
                                }
                            })
                        }}
                        data-modallist={{
                            layout:{width: 50,name: '测试',require: false,style: {width:'100%'}},
                            regexp: {
                                value: value5,
                                exp: (val)=>{ if('111'.indexOf(val) > -1 ){return true}else{return false}}
                            }
                        }}
                    />
                    <VtxSelect
                        value={select1}
                        onChange={(val)=>{
                            dispatch({
                                type: 'modalList/updateState',
                                payload: {
                                    select1: val
                                }
                            })
                        }}
                        data-modallist={{
                            layout:{width: 50,name: '测试',require: false,style: {width:'100%'}},
                        }}
                    >
                        <Option value={'1'}>12</Option>
                        <Option value={'2'}>2</Option>
                        <Option value={'3'}>3</Option>
                    </VtxSelect>
                </VtxModalList>
            </VtxModal>
        )
    }
}

export default connect(
    ({modalList})=>({modalList})
)(IndexPage);